<template>
  <div class="page">
    <div class="setting" v-for="item in allSetting" :key="item.id">
      <el-input
        v-model="item.value"
        :placeholder="item.remark ? item.remark : `请输入${item.key}`"
        class="input-with-select"
      >
        <template #prepend>
          <div class="key">{{ item.key }}</div>
        </template>
        <template #append>
          <el-button type="primary" @click="handleSaveSetting(item)"> 保存 </el-button>
        </template>
      </el-input>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { storeToRefs } from "pinia";
import { useCommonStore } from "@/store/modules/common";
import settingService from "@/api-services/apis/sysSetting";
import { SysSetting } from "@/api-services/models";
import { ElMessage } from "element-plus";

const commonStore = useCommonStore();
const { allSetting } = storeToRefs(commonStore);
const { loadAllSetting } = commonStore;
// const { loadAllSetting } = commonStore;

async function handleSaveSetting(params: SysSetting) {
  await settingService.SaveSetting(params);
  await loadAllSetting();
  ElMessage({
    type: "success",
    message: "配置保存成功",
  });
}
</script>

<style scoped lang="scss">
.page {
  padding: 10px;
  .setting {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    .key {
      text-align: right;
      width: 200px;
    }
    .value {
      flex: 1;
      padding: 0 10px;
    }
  }
}
</style>
